<template>
    <ul class="node-panel">
        <template
            v-for="(item,index) in list">
            <li
                v-if="!item.isStart"
                :key="index"
                class="node-item"
                draggable="true"
                @dragstart="onDragstart($event, index)">
                <i :class="item.icon" />
                {{item.label}}
            </li>
        </template>
    </ul>
</template>

<script>
    import NODE_LIST from './data/node-list'

    export default {
        name: 'node-panel',

        data () {
            return {
                list: NODE_LIST
            }
        },

        methods: {
            onDragstart (event, index) {
                event.dataTransfer.setData('nodeIndex', index)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .node-panel {
        width: 160px;
        padding: 20px;
        background-color: #f7f9fb;
        border-right: 1px solid #e6e9ed;
    }

    .node-item {
        padding-left: 8px;
        height: 28px;
        line-height: 26px;
        border-radius: 4px;
        border: 1px solid transparent;
        color: rgba(#000, 0.65);
        cursor: move;

        &:hover {
            background-color: #fff;
            border: 1px solid #ced4d9;
        }

        i {
            margin-right: 5px;
            font-size: 16px;
        }
    }
</style>
